﻿<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Global sequence alignment</title>
		<meta charset="utf-8">
		<meta name="author" content="Jan Stalhut, Kalender Hisir, Christian Becker, Inga Breuer, Steve Liedtke" />
		<meta name="description" content="Calculation of a pairwise global sequence alignment" />
		<link rel="stylesheet" href="css/main.css" />
        <script src="js/global.js"></script>
		<script src="js/algorithm.js"></script>
		<script src="js/cellInfo.js"></script>
		<script src="js/gui.js"></script>
		<script src="js/guistep.js"></script>
	</head>
	<body>
		<h1>Global sequence alignment</h1>
		<ul id="tabline">
			<li onclick="gui.switchTab('theory');">Theory</li>
			<li onclick="gui.switchTab('compare');">Compare sequences</li>
		</ul>
		<section class="tab" id="theory">
			<h2>Theory</h2>
			<h3>Alignment</h3>
			<p>An alignment is used to compare two or more sequences. In biology alignments help to study relationships between
				different genes or proteins. Similar sequences imply similar functions and/or evolutionary origin. When exactly
				two sequences are compared, it´s called pairwise alignment. The pairwise alignment is the transformation of one
				sequence into another.</p>
			<h3>Global alignment</h3>
			<p>A global alignment analyzes all symbols of the two sequences. Global alignments are used when the sequences are
				similar in length and strong sequence homologies are expected.</p>
			<h3>Edit-distance</h3>
			<p>For transformation of one sequence into another different edit operations (substitute[a → b], insert[- → b],
				delete[a → -]) are processed. According to the unit cost model the edit operations are associated with costs.
				The costs of substitute, insert and delete are “1”. A match has no costs.
				<br>The total costs of all edit operations of an alignment are called alignment costs. The optimal alignments is
				the alignment with minimal costs. The edit-distance (or Levenshtein distance) fits the costs of the optimal
				alignment.</p>
			<h3>Edit-distance-matrix</h3>
			<p>The optimal alignments and therefore the edit-distance can be determined using the edit-distance-matrix.
				<br><img src="images/matrix.png" alt="matrix">
				<br>To determine the value of each field, you have to calculate the sum of the values of the previous fields and
				the costs of their corresponding edit operations. The diagonal path corresponds to match or substitute,
				horizontal means insert and vertical means delete. Then the minimum of these sums is determined as the field
				value.
				<br>To find the optimal alignment(s) you can perform a traceback. You have to go from the last field (n, m)
				through the matrix. In each case you go back to the field that has provided the minimum. In this way all optimal
				alignments can be found.</p>			
		</section>
		<section class="tab" id="compare">
			<h2>Compare sequences</h2>
			<div id="fieldsets">
				<fieldset id="inputSet">
					<legend>Sequences for a comparison</legend>
					<label for="inputSeqB">Sequence A:</label>
					<input id="inputSeqB" type="text" placeholder="nucleic or amino acid sequence" onfocus="gui.showInputInfo(this);" onblur="gui.showInputInfo();" onkeydown="gui.ontypeCompareSequences(this);" onkeyup="gui.ontypeCompareSequences(this);">
					<img id="inputSeqBvalidation" src="images/right.png" width="22" height="22" class="validation"><br>
					<label for="inputSeqA">Sequence B:</label>
					<input id="inputSeqA" type="text" placeholder="nucleic or amino acid sequence" onfocus="gui.showInputInfo(this);" onblur="gui.showInputInfo();" onkeydown="gui.ontypeCompareSequences(this);" onkeyup="gui.ontypeCompareSequences(this);">
					<img id="inputSeqAvalidation" src="images/wrong.png" width="22" height="22" class="validation">
				</fieldset>
				<fieldset id="controlSet">
					<legend>Control elements</legend>
					<span id="infoControlSection">
						<input id="infoControl" type="checkbox" checked onchange="gui.toggleBubble();">
						<label for="infoControl">Activate info</label>
					</span>
					<input id="modeControl" type="button" value="Start step by step" onclick="guistep.changeMode();">
					<div id="stepByStepControls">
						<div id="prevLine" onclick="return guistep.stepCall('prevLine', this);" class="disabled"></div>
						<div id="prevStep" onclick="return guistep.stepCall('prev', this);" class="disabled"></div>
						<div id="nextStep" onclick="return guistep.stepCall('next', this);"></div>
						<div id="nextLine" onclick="return guistep.stepCall('nextLine', this);"></div>
					</div>
				</fieldset>
			</div>
			<p id="exampleinfo">Example of a comparison result:</p>
			<table id="result">
					<tr>
						<td rowspan="2" colspan="2" id="topleftcorner">&nbsp;</td>
						<th colspan="4" id="topheadline">Sequence B</th>
					</tr>
					<tr>
						<th class="top">-</th>
						<th class="top">G</th>
						<th class="top">A</th>
						<th class="top">T</th>
					</tr>
					<tr>
						<th rowspan="4" id="leftheadline"><div class="leftheadline">Sequence A</div></th>
						<th class="left">-</th>
						<td class="path"><div>0</div></td>
						<td><div>1<div class="a_left"></div></div></td>
						<td><div>2<div class="a_left"></div></div></td>
						<td><div>3<div class="a_left"></div></div></td>
					</tr><tr>
						<th class="left">G</th>
						<td><div>1<div class="a_top"></div></div></td>
						<td class="path"><div>0<div class="a_topleft_path"></div></div></td>
						<td><div>1<div class="a_left"></div></div></td>
						<td><div>2<div class="a_left"></div></div></td>
					</tr><tr>
						<th class="left">G</th>
						<td><div>2<div class="a_top"></div></div></td>
						<td><div>1<div class="a_top"></div><div class="a_topleft"></div></div></td>
						<td class="path"><div>1<div class="a_topleft_path"></div></div></td>
						<td><div>2<div class="a_left"></div><div class="a_topleft"></div></div></td>
					</tr><tr>
						<th class="left">A</th>
						<td><div>3<div class="a_top"></div></div></td>
						<td><div>2<div class="a_top"></div></div></td>
						<td><div>1<div class="a_topleft"></div></div></td>
						<td class="path"><div>2<div class="a_left"></div><div class="a_topleft_path"></div></div></td>
					</tr>
			</table>
			<div id="alignmentinfo">
				<h3>List of all existing optimal alignments</h3>
				<p class="info">The different background colors and its corresponding operations:
					<span class="insert">insert</span>
					<span class="update">update</span>
					<span class="delete">delete</span></p>
			</div>
			<div id="alignments">
			</div>
			<div id="bubble" onclick="gui.clickBubble();">
				<div id="bubbleExt">
					<div class="bottomleft"></div>
					<div class="bottomright"></div>
					<div class="horizontalleft"></div>
					<div class="horizontalright"></div>
					<div class="vertikalbottom"></div>
					<div class="content" id="bubbleExt_content"></div>
				</div>
				<div class="bottomleft"></div>
				<div class="bottomright"></div>
				<div class="topleft"></div>
				<div class="topright"></div>
				<div class="horizontalleft"></div>
				<div class="horizontalright"></div>
				<div class="vertikalbottom"></div>
				<div class="vertikaltop"></div>
				<div class="content" id="bubble_content"></div>
			</div>
			<div id="bubble2" onclick="gui.clickBubble();">
				<div id="bubbleExt2">
					<div class="bottomleft"></div>
					<div class="bottomright"></div>
					<div class="horizontalleft"></div>
					<div class="horizontalright"></div>
					<div class="vertikalbottom"></div>
					<div class="content" id="bubbleExt2_content"></div>
				</div>
				<div class="bottomleft"></div>
				<div class="bottomright"></div>
				<div class="topleft"></div>
				<div class="topright"></div>
				<div class="horizontalleft"></div>
				<div class="horizontalright"></div>
				<div class="vertikalbottom"></div>
				<div class="vertikaltop"></div>
				<div class="content" id="bubble2_content"></div>
			</div>
		</section>
		<div id="progressblocking">
			<img src="images/processing.gif" width="66" height="66">
			<p>Working, please wait a moment ...</p>
		</div>
	</body>
</html>